/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, TextInput,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数

import * as bindMobileAction from "../actions/bindMobileAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import { isEmpty } from "../utils/utils";

let type;

class BindMobileGetCode extends Component {
  constructor(props) {
    super(props);
    type = NavigatorUtil.getPageParam(props, "type");
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(bindMobileAction.bingMobileGetCodeUnmount());
  }

  handleClick = () => {
    const { props } = this;
    const { bindMobileGetCodeReducer } = props;
    const { mobile } = bindMobileGetCodeReducer;
    props.dispatch(bindMobileAction.getSmsCode(mobile, type, res => NavigatorUtil.goBindMobile(mobile, type)));
  };

  render() {
    const { props } = this;
    const { bindMobileGetCodeReducer } = props;
    const { mobile, loading } = bindMobileGetCodeReducer;

    const isMobileDown = mobile.length === 11;

    return (
      <BasePage style={styles.container} showLoading={loading}>
        <Text style={styles.textMain}>绑定关联手机号</Text>
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>+86</Text>
          <View style={styles.divider} />
          <TextInput
            ref={c => (this.input = c)}
            value={mobile}
            autoFocus
            blurOnSubmit
            onChangeText={text => props.dispatch(bindMobileAction.inputMobile(text))}
            maxLength={20}
            keyboardType="numeric"
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入手机号"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.imgIcon}
            onPress={() => this.input.clear()}
            disabled={isEmpty(mobile)}
          >
            {!isEmpty(mobile) && <Image source={require("../img/ic_input_clear.png")} style={styles.imgIcon} />}
          </TouchableOpacity>
        </View>
        <Button
          disabled={!isMobileDown}
          onPress={this.handleClick}
          buttonStyle={isMobileDown ? styles.btnContainer : styles.btnDisContainer}
          textStyle={styles.btnText}
          title="下一步"
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
    paddingTop: scale * 16,
  },
  divider: {
    width: 1,
    height: scale * 20,
    marginLeft: scale * 12,
    marginRight: scale * 12,
    backgroundColor: Color.text_assist,
  },
  textMain: {
    fontSize: FontSize.SIZE_22,
    color: Color.text_title,
    marginTop: scale * 12,
    marginBottom: scale * 18,
    width: ScreenWidth - scale * 48,
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth - scale * 48,
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: 1,
    borderColor: Color.text_assist,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  imgIcon: {
    width: scale * 16,
    height: scale * 16,
  },
  btnContainer: {
    marginTop: scale * 48,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
  },
  btnDisContainer: {
    marginTop: scale * 48,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#DEB108",
    borderWidth: 0,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.white,
  },
  input: {
    flex: 1,
    marginRight: scale * 10,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
});

const reducers = state => {
  return {
    bindMobileGetCodeReducer: state.bindMobileGetCodeReducer,
  };
};

export default connect(reducers)(BindMobileGetCode);
